<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			.flexa{
				display: flex;
				
			}
			.cur>a{
				color: #0C5460;
				background-color: #FF0000;
			}
			#content{
				display: flex;

			}
			#content>ul{
				margin-left: 15px;
				width: 200px;
				background-color: #0077AA;
				color: #E0E0E0;
				display: none;
				box-sizing: border-box;
			}
			#content>ul.active{
				display: none;
				z-index: 10;
			}
		</style>
	</head>
	<body>
		<div class="flexa">
			<div id="card">
				<div id="title">
					<h3 class="cur"><a href="">第一项</a></h3>
					<h3><a href="">第二项</a></h3>
					<h3><a href="">第三项</a></h3>
				</div>
			</div>
			<div id="content">
				<ul class="active" id="active">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
				<ul >
					<li>二</li>
					<li>二</li>
					<li>二</li>
					<li>二</li>
					<li>二</li>
				</ul>
				<ul >
					<li>3</li>
					<li>3</li>
					<li>3</li>
					<li>3</li>
					<li>3</li>
				</ul>
			</div>
		</div>
		
		<script src="js/选项卡.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
